<template>
  <div id="main-page">
    <div>
      <div class="top-panel">
        <div class="top-item">
          <el-input
            placeholder="输入关键词查询"
            v-model="searchData.name"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="selectShipList(searchData)"
            >查找亲属</el-button
          >
        </div>
        <div class="top-item">
          <el-button type="primary" @click="showAddRelationForm"
            >增加亲属</el-button
          >
        </div>
      </div>

      <!-- 增加亲属关系的对话框 -->
      <el-dialog
        title="填写亲属信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          label-position="left"
          label-width="100px"
          :model="addRelationForm"
        >
          <el-form-item label="亲属关系">
            <el-input v-model="addRelationForm.relationship"></el-input>
          </el-form-item>
          <el-form-item label="亲属身份证">
            <el-input v-model="addRelationForm.relation_id_card"></el-input>
          </el-form-item>
          <el-form-item label="亲属姓名">
            <el-input v-model="addRelationForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="addRelationForm.sex">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="addRelationForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择出生日期"
              v-model="addRelationForm.birth"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="addRelationForm.address"></el-input>
          </el-form-item>
          <el-form-item label="民族">
            <el-input v-model="addRelationForm.nation"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRelation()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="修改亲属信息"
        :visible.sync="dialogVisibleChange"
        width="30%"
        :before-close="handleCloseChange"
      >
        <el-form
          label-position="left"
          label-width="100px"
          :model="addRelationForm"
        >
          <el-form-item label="亲属关系">
            <el-input v-model="addRelationForm.relationship"></el-input>
          </el-form-item>
          <el-form-item label="亲属身份证">
            <el-input
              v-model="addRelationForm.relation_id_card"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="亲属姓名">
            <el-input
              v-model="addRelationForm.name"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="addRelationForm.sex" :disabled="true">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="addRelationForm.tel" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择出生日期"
              v-model="addRelationForm.birth"
              style="width: 100%"
              :disabled="true"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="地址">
            <el-input
              v-model="addRelationForm.address"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="民族">
            <el-input
              v-model="addRelationForm.nation"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="addRelation()">确 定</el-button>
        </span>
      </el-dialog>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="patientUser.id_card"
          label="亲属身份证"
        ></el-table-column>
        <el-table-column prop="relationShip" label="关系类型"></el-table-column>
        <el-table-column prop="patientUser.name" label="姓名"></el-table-column>
        <el-table-column prop="patientUser.sex" label="性别"></el-table-column>
        <el-table-column
          prop="patientUser.address"
          label="地址"
        ></el-table-column>
        <el-table-column
          prop="patientUser.birth"
          label="出生日期"
        ></el-table-column>
        <el-table-column
          prop="patientUser.hash"
          label="交易哈希"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="changeRelationForm(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="checkMedicalRecord(scope.row)"
              size="small"
              >查看病历</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: red"
              @click="deleteRelationForm(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-panel">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import { relationShipList, addRelationShip } from "@/utils/data/relation";
import { ship } from "@/api";
export default {
  data() {
    return {
      total: 10,
      changeType: false, //用于判断是否选择修改，若否，则是新增
      tableData: null,
      searchData: {
        cur: 1, 
        name: null     
      },
      dialogVisible: false, //增加弹框
      dialogVisibleChange: false, //修改弹框
      registerForm: {
        tel: null,
        email: null,
        name: null,
        sex: null,
        id_card: null,
        address: null,
        birth: null,
        nation: null,
      },
      addRelationForm: {
        relationship: null,
        relation_id_card: null,
        name: null,
        sex: null,
        tel: null,
        birth: null,
        address: null,
        nation: null,
      },
      curObj:{
        cur:1,
      }
    };
  },
  created() {
    
    this.selectShipList(this.curObj);
  },
  methods: {
    //分页点击事件
    changePage(val) {
      this.curObj.cur=val
      this.selectShipList(this.curObj);
    },
    //关闭修改弹框
    handleCloseChange() {
      this.dialogVisibleChange = false;
    },
    //关闭添加弹框
    handleClose() {
      this.dialogVisible = false;
    },
    //弹出修改弹框
    changeRelationForm(row) {
      console.log(row.patientUser);
      this.addRelationForm = row.patientUser;
      this.addRelationForm.id = row.id;
      this.dialogVisibleChange = true;
      this.changeType = true;
    },
    //清除表单
    clearRelationForm() {
      this.addRelationForm = {
        relationship: null,
        relation_id_card: null,
        name: null,
        sex: null,
        tel: null,
        birth: null,
        address: null,
        nation: null,
        id: null
      };
    },
    //删除亲属关系
    deleteRelationForm(id) {
      console.log(id);
      let obj = {
        ship_id: id,
      };
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ship.delShipMrList(obj).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.selectShipList(this.curObj);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 增加亲属
    showAddRelationForm() {
      this.clearRelationForm();
      this.dialogVisible = true;
      this.changeType = false;
    },

    addRelation() {
      //新增
      if (!this.changeType) {
        ship.addRelationShip(this.addRelationForm).then((res) => {
          this.addRelationForm.sex = this.addRelationForm.sex === "0" ? "女" : "男" 
          this.dialogVisible = false;
          console.log(res);
          this.selectShipList(this.curObj);
          this.clearRelationForm();
        });
      } else {
        //修改
        let obj = {
          id: this.addRelationForm.id,
          relationship: this.addRelationForm.relationship,
        };
        ship.changeRelationShip(obj).then((res) => {
          this.dialogVisibleChange = false;
          console.log(res);
          this.selectShipList(this.curObj);
          this.clearRelationForm();
        });
      }
    },

    selectShipList(data) {
      console.log("data " + data);
      ship.selectUserShip(data).then((res) => {
        console.log(localStorage.getItem("token"));
        this.tableData = res.data.data.records;
        this.total=res.data.data.total
        console.log(res);
      });
    },

    checkMedicalRecord(row) {
      console.log(row.patientUser.id_card);
      this.$router.push({
        name: "MedicalRecord",
        query: {
          shipId: row.patientUser.id_card,
        },
      });
    },
  },
};
</script>

<style></style>